<?php

require_once '../../includes/includes.php';




if (!isset($_GET['id'])) {
    header('Location: ../');
    exit();
}

$album_id = (int)$_GET['id'];

$content = Picture::getAlbumContent($album_id);

$table = 'albums';
$fields = '*';
$where_sql = 'id = :id';
$where_data = array('id' => $album_id);

$db->select($table, $fields, $where_sql, $where_data);
$album = $db->fetch();


if ($db->rowCount() != 1) {
    header('Location: ../');
}

$fileCount = 1;

$albums = getAlbums();
$albums = indexOf('id', $albums);

$table = 'photographs';
$fields = '*';
$where_sql = 'album_id = :album_id';
$where_data = array('album_id' => $album_id);

$db->select($table, $fields, $where_sql, $where_data);
$pics = $db->fetchAll();
$pics = array_reverse($pics);

?>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

    <style>
        .imgTitle {
            background: #C5FEF0;
        }
        
        p {
            border: 1px solid black;
        }

        #saveBtn {
            display: none;
        }

/*        .delPic {
            display: none;
        }*/

/*        ._changePic {
            display: none;
        }*/

        #refresh {
            display: none;
        }

            /*            #newPic p a {
                            display: none;
                        }*/
    </style>
</head>
<body>
<a href="../">Back</a>
<!-- START DELETE ALBUM -->
<h3>
    <a href="#" id="deleteAlbum">Delete Album</a>
    <input type="hidden" id="album_id" value="<?php echo $album_id; ?>"/>
</h3>
<!-- END DELETE ALBUM -->

<!-- START ADD PIC -->
<h3>
<!--    <a href="#" id="addPics">Add Picture</a>-->
</h3>
<form enctype="multipart/form-data" action="uploadPics.php"  method="POST">
    <input type="file" name="file[]" multiple="" />
    <input type="hidden" name="album" value="<?php echo $album['name']; ?>" />
    <input type="hidden" name="album_id" value="<?php echo $album['id']; ?>" />
    <Br />
    <input type="submit" value="Add" name="upload" />
</form>

<h3>
    <a href="#" id="refresh">Refresh</a>
</h3>

<div id="newPic"></div>
<div id="savePics">
    <input type="button" value="Save" id="saveBtn"/>
</div>
<!-- END ADD PIC -->

<div >
    <label>Content:</label>
    <br />
    <textarea id="content" style="background: #C5FEF0;"><?php echo $content; ?></textarea>
</div>

<!-- INFO DIV -->
<div id="info"></div>

<?php


foreach ($pics as $pic) {

    $id = $pic['id'];
    $title = $pic['title'];
    $imgId = 'img' . $fileCount;
    $imgPath = ALBUM_PATH . $albums[$pic['album_id']]['name'] . '/' . $pic['source'];
    $changePicId = 'changePic' . $fileCount;

    ?>

<p style="float: left;>
    <input class="imgTitle" value="<?php echo $title; ?>"/>
    <br/>
    <img id="<?php echo $imgId; ?>" src="<?php echo $imgPath; ?>" style="zoom: 0.4; max-height: 400px;"/>
    <br/>
<!--    <input class="_changePic" id="<?php echo $changePicId; ?>" type="file" value="Change Picture">-->
    <br/>
    <input class="picId" type="hidden" value="<?php echo $id; ?>"/>
    <a href="#" class="delPic">Delete</a>
</p>

    <?php

    $fileCount++;
}

?>

<input type="hidden" id="albumId" value="<?php echo $album_id; ?>"/>


<script type="text/javascript" src="../../js/ajaxChangeImage.js"></script>
<script type="text/javascript" src="../../js/ajaxUpload.js"></script>
<script type="text/javascript">

fileCount = 1;

/*  SHOW REMOVE LINK AND CHANGE IMAGE OPTION  START */

/*

$('p').mouseover(function () {
    $(this).css("border", "1px solid black");
    $(this).children('.delPic , ._changePic').toggle();
}).mouseout(function () {
            $(this).css("border", '');
            $(this).children('.delPic, ._changePic').toggle();
        });
        
        */

/*  SHOW REMOVE LINK AND CHANGE IMAGE OPTION  END   */



/*   ADD PIC START  */

$('#addPics').click(function () {

    $('#saveBtn').show();


    var html = '<p class="addNewPic">';
    html += 'Title:';
    html += '<input type="text" />';
    html += '<br />';
    html += '<input type="file" class="_addFile" id="addFile' + fileCount + '" />';
    html += '<a href="#" class="delPicUp">Remove</a>';
    html += '</p>';

    fileCount++;

    $('#newPic').append(html);

    $('.delPicUp').click(function () {
        $(this).parent().remove();
        if ($('#newPic').children().size() == 0) {
            $('#saveBtn').hide();
        }

    });

    return false;
});


$('#saveBtn').click(function () {

//                $('._addFile').each(function() {
//
//                    var params = {
//                        file      : $(this).attr('id'),
//                        title     : $(this).prev().prev().val(),
//                        albumId   : $('#albumId').val(),
//                        url       : 'upload.php'
//                    };
//                    
//                    
//
//                    ajaxUpload(params, remElem);
//                    
//
//                });

//                console.log($('._addFile')[22]);

    var j = $('._addFile').length;

    for (var i = 0; i < fileCount - 1; i++) {

        if ($('._addFile')[i] === undefined) {
            continue;
        }
        else {

            element = $('._addFile')[i];
////                        
//                        console.log(element.id);

            var params = {
                file:element.id,
                title:element.previousSibling.previousSibling.value,
                albumId:$('#albumId').val(),
                url:'upload.php'
            };

            ajaxUpload(params, remElem);

        }
    }

    $('#refresh').show().click(function () {
        refreshPage();
        return false;
    });

});

function remElem(elem) {
    elem.remove();
}

/*   ADD PIC END   */



/*  DELETE PIC START    */


$('.delPic').each(function () {

    $(this).click(function () {

        var conf = confirm("Are you sure ?");

        if (conf == true) {
            var picId = $(this).prev().val();
            var parent = $(this).parent();

            $.ajax({
                url:'delete_pic.php',
                type:"POST",
                data:{ pic_id:picId },
                success:function (data) {
                    console.log(data);
                    parent.remove();
                }
            });
        }
    });
});


/*  DELETE PIC END    */




/*  CHANGE TITLE START  */

$('.imgTitle').each(function () {
    $(this).focusin(function () {
        $(this).css({'background':'yellow'});
    }).blur(function () {
                $(this).css({'background':'#C5FEF0'});
                changeTitle($(this));
            });
});

function changeTitle(element) {

    var title = element.val();
    var picId = element.siblings('.picId').val()

    $.ajax({
        url:'changeTitle.php',
        type:"POST",
        data:{ title:title, id:picId },
        success:function (res) {
            $('#info').html(res)
        }
    });
}

/*  CHANGE TITLE END  */

/*  CHANGE CONTENT START  */

$('#content').focusin(function () {
    $(this).css({'background':'yellow'});
}).blur(function () {
    $(this).css({'background':'#C5FEF0'});
    changeContent($(this));
});

function changeContent(element) {

    var content = element.val();
    var albumId = $('#album_id').val();

    $.ajax({
        url:'changeContent.php',
        type:"POST",
        data:{ content : content, id : albumId },
        success:function (res) {
            console.log(res);
//            $('#info').html(res)
        }
    });
}

/*  CHANGE CONTENT END  */


$('._changePic').each(function () {

    var params = {
        file:$(this).attr('id'),
        picId:$(this).next().next().val(),
//                    image   : $(this).prev().prev(),
        image:$(this).prev().prev().attr('id'),
        url:'changeImg.php'
    };

    ajaxChangeImage(params, refreshImg);
});


/*   <-   Edit Pic   */


/*  Delete Album    ->  */

$('#deleteAlbum').click(function () {

    var conf = confirm("Are you sure ?");

    if (conf == true) {
        var album_id = $(this).next().val();

        $.ajax({
            url:'deleteAlbum.php',
            type:"POST",
            data:{ album_id:album_id },
            success:function (res) {
                $('#info').html(res)
            }
        }).done(function () {
                    refreshPage();
                });
    }
});

/*  <-  Delete Album  */


function refreshImg(imgId) {
    var image = document.getElementById(imgId);
    var src = image.src;
    image.setAttribute('src', src);

    console.log(image);
}

function refreshPage() {
    location.reload();
}

</script>
<div style="height: 200px;"></div>
</body>
</html>


